@extends('layout.master')

@section('title','商品列表')

@section('css')
@parent
<!-- Daterange picker plugins css -->
<link href="{{ asset('plugins/bower_components/bootstrap-daterangepicker/daterangepicker.css') }}" rel="stylesheet">
@endsection
@section('main')

@if (session('message'))
<div>
    <input type="hidden" id="hidden" name="hidden" value="hidden">
    <input type="hidden" id="message" name="message" value="{{ session('message') }}">
    <input type="hidden" id="status" name="status" value="{{ session('status') }}">
</div>
@endif


<div class="panel">
    <div class="panel-heading">
        <div class="panel-action" style="margin-top: -9px">
            <a class="popup-with-form btn fcbtn btn btn-outline btn-info btn-1c" href="/commodity/commodityPublish">
                <span>添加商品</span>
            </a>
        </div>
    </div>
    <div class="panel-wrapper collapse in" aria-expanded="true">
        <div class="panel-body">
            <form action="#">
                <div class="form-body">
                    <div class="row">
                        <div class="col-md-3 col-sm-6">
                            <div class="form-group">
                                <label class="control-label">商品名称</label>
                                <input type="text" id="id" class="column_filter form-control"
                                       data-column="0"
                                       placeholder="商品名称">
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="panel">
    <div class="panel-heading">商品列表</div>
    <div class="panel-wrapper collapse in" aria-expanded="true">
        <div class="panel-body">
            <div class="table-responsive">
                <table id="example23" class="display nowrap" cellspacing="0" width="100%"
                       data-url="{{ url(request()->getUri()) }}">
                    <thead>
                    <tr>
                        <th>商品ID</th>
                        <th>商品名称</th>
                        <th>商铺名称</th>
                        <th>是否促销</th>
                        <th>是否热门</th>
                        <th>剩余量</th>
                        <th>现价</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection
@section('js')
@parent
<!-- Plugin JavaScript -->
<script src="{{ asset('plugins/bower_components/moment/moment.js') }}"></script>
<!-- Date range Plugin JavaScript -->
<script src="{{ asset('plugins/bower_components/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
<script>
    $('.input-daterange-datepicker').daterangepicker({});
</script>
<script>
    var url = $('#example23').data('url');
    var obj = $('#example23');
    obj.DataTable({
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ],
        "ordering": true,
        "processing": true,
        "responsive": false,
        "lengthMenu": [
            [10, 20, 50, 100],
            ['10 行', '20 行', '50 行', '100 行']
        ],
        "order": [[0, "desc"]],
        "columnDefs": [{
            orderable: false,
            targets: [1,2,3,4,5,6,7]
        }],
        "language": {
            "sProcessing": '<div id="fountainG"><div id="fountainG_1" class="fountainG"></div><div id="fountainG_2" class="fountainG"></div><div id="fountainG_3" class="fountainG"></div><div id="fountainG_4" class="fountainG"></div><div id="fountainG_5" class="fountainG"></div><div id="fountainG_6" class="fountainG"></div><div id="fountainG_7" class="fountainG"></div><div id="fountainG_8" class="fountainG"></div></div>',
            "sLengthMenu": "显示 _MENU_ 项结果",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
            "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "暂无记录",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上一页",
                "sNext": "下一页",
                "sLast": "末页"
            }
        },
        serverSide: true,
        ajax: {
            url: url,
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        },
        "deferRender": true
    });
    $('.column_filter').on('change', function () {
        obj.DataTable().column($(this).data('column')).search($(this).val(), false, true).draw();
    });
    //跳转页
    $("#example23").append("  到第 <input type='text' id='changePage' class='input-text' style='width:50px;height:27px'> 页 ");
    var oTable = $("#example23").dataTable();
    $('#changePage').keyup(function (e) {
        if ($(this).val() && $(this).val() > 0) {
            var redirectpage = $(this).val() - 1;
        } else {
            var redirectpage = 0;
        }
        oTable.fnPageChange(redirectpage);
    });


    $(document).ready(function () {
        var hidden = $('#hidden').val();
        if (hidden === 'hidden') {
            if ($('#status').val() == 1) {
                toastsuccess($('#message').val());
            } else {
                toasterror($('#message').val());
            }
        }
    });

    obj.on('click', '.btn-del', function () {
        var id = $(this).data('id');
        swal({
                title: "",
                text: "确定删除么？",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "是的",
                closeOnConfirm: false
            },
            function () {
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: '/commodity/commodityDel/' + id,
                    type: 'POST',
                    success: function (data) {
                        if (data.status !== 1) {
                            swal(data.message);
                        } else {
                            swal(data.message, '', 'success');
                            $('.confirm').click(function () {
                                location.reload();
                            });
                        }
                    }
                })
            }
        );
    });


</script>
@endsection